<template>
  <div class="page_warp">
    <header class="header_warp">
      <div class="header_left">
      </div>
      <div class="header_right">
        <el-select v-model="value" placeholder="请选择城市" size="small" class="select_warp">
          <el-option
            v-for="item in cityList11"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择报告类型" size="small" class="select_warp">
          <el-option
            v-for="item in reportTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="value" placeholder="请选择统计时间" size="small" class="select_warp">
          <el-option
            v-for="item in timeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </header>
    <div class="page_tips_warp">
      <myChartTemp></myChartTemp>
      <div style="height: 10px"></div>
      <myCharts></myCharts>
      <div style="height: 10px"></div>
      <myTable></myTable>
    </div>
    <div id="allmap"></div>
  </div>
</template>

<script>
import myCharts from '../../components/myChart/index';
import myTable from '../../components/myTable/index'
import myChartTemp from '../../components/myChart/myChartTemp';
export default {
  components: {myCharts, myTable,myChartTemp},
  data() {
    return {
      value: '',
      cityList11: [
        {label: '北京', value: 1},
        {label: '上海', value: 2},
        {label: '广州', value: 3}
      ],
      reportTypeList: [
        {label: '周报', value: 1},
        {label: '月报', value: 2},
        {label: '年报', value: 3}
      ],
      timeList: [
        {label: `7天`, value: 1},
        {label: `30天`, value: 2},
        {label: `180天`, value: 3},
        {label: `360天`, value: 4}
      ],
      myMap: null,
      curMapZoom: 0,
      cityList: [
        {x: 121.48, y: 31.23, name: "黄浦区", count: "1118套房", price: 3.4},
        {x: 121.43, y: 31.18, name: "徐汇区", count: "1118套房", price: 3.4},
        {x: 121.45, y: 31.23, name: "静安区", count: "1118套房", price: 3.4},
        {x: 121.5, y: 31.27, name: "虹口区", count: "1118套房", price: 3.4},
        {x: 121.4, y: 31.25, name: "普陀区", count: "1118套房", price: 3.4},
        {x: 121.48, y: 31.4, name: "宝山区", count: "1118套房", price: 3.4},
        {x: 121.38, y: 31.12, name: "闵行区", count: "1118套房", price: 3.4}
      ],
      cityList2: [
        {x: 121.48, y: 31.23, name: "子集11", count: "1118套房", price: 3.4},
        {x: 121.43, y: 3.6, name: "子集12", count: "1118套房", price: 3.4},
        {x: 121.36, y: 31.9, name: "子集13", count: "1118套房", price: 3.4},
        {x: 121.52, y: 32.1, name: "子集14", count: "1118套房", price: 3.4},
        {x: 121.46, y: 32.2, name: "子集15", count: "1118套房", price: 3.4},
        {x: 121.48, y: 32.3, name: "子集16", count: "1118套房", price: 3.4},
        {x: 121.28, y: 32.4, name: "子集17", count: "1118套房", price: 3.4}
      ],
      cityList3: [
        {x: 121.48, y: 31.23, name: "子集11", count: "1118套房", price: 3.4},
        {x: 121.43, y: 3.6, name: "子集12", count: "1118套房", price: 3.4},
        {x: 121.36, y: 31.9, name: "子集13", count: "1118套房", price: 3.4},
        {x: 121.52, y: 32.1, name: "子集14", count: "1118套房", price: 3.4},
        {x: 121.46, y: 32.2, name: "子集15", count: "1118套房", price: 3.4},
        {x: 121.48, y: 32.3, name: "子集16", count: "1118套房", price: 3.4},
        {x: 121.28, y: 32.4, name: "子集17", count: "1118套房", price: 3.4}
      ],
    }
  },
  mounted() {
    this.tempCityList()
    this.initMap()
  },
  methods: {
    tempCityList() {
      let arr = [

        { name: '北京', value: [ '116.3979471', '39.9081726', 78 ] },

        { name: '上海', value: [ '121.4692688', '31.2381763', 75 ] },

        { name: '天津', value: [ '117.2523808', '39.1038561', 95 ] },

        { name: '重庆', value: [ '106.548425', '29.5549144', 78 ] },

        { name: '河北', value: [ '114.4897766', '38.0451279', 42 ] },

        { name: '山西', value: [ '112.5223053', '37.8357424', 90 ] },

        { name: '辽宁', value: [ '123.4116821', '41.7966156', 96 ] },

        { name: '吉林', value: [ '125.3154297', '43.8925629', 46 ] },

        { name: '黑龙江', value: [ '126.6433411', '45.7414932', 97 ] },

        { name: '浙江', value: [ '120.1592484', '30.265995', 32 ] },

        { name: '福建', value: [ '119.2978134', '26.0785904', 2 ] },

        { name: '山东', value: [ '117.0056', '36.6670723', 32 ] },

        { name: '河南', value: [ '113.6500473', '34.7570343', 23 ] },

        { name: '湖北', value: [ '114.2919388', '30.5675144', 76 ] },

        { name: '湖南', value: [ '112.9812698', '28.2008247', 71 ] },

        { name: '广东', value: [ '113.2614288', '23.1189117', 6 ] },

        { name: '海南', value: [ '110.3465118', '20.0317936', 64 ] },

        { name: '四川', value: [ '104.0817566', '30.6610565', 54 ] },

        { name: '贵州', value: [ '106.7113724', '26.5768738', 1 ] },

        { name: '云南', value: [ '102.704567', '25.0438442', 78 ] },

        { name: '江西', value: [ '115.8999176', '28.6759911', 16 ] },

        { name: '陕西', value: [ '108.949028', '34.2616844', 14 ] },

        { name: '青海', value: [ '101.7874527', '36.6094475', 22 ] },

        { name: '甘肃', value: [ '103.7500534', '36.0680389', 37 ] },

        { name: '广西', value: [ '108.3117676', '22.8065434', 52 ] },

        { name: '新疆', value: [ '87.6061172', '43.7909393', 11 ] },

        { name: '内蒙古', value: [ '111.6632996', '40.8209419', 56 ] },

        { name: '西藏', value: [ '91.1320496', '29.657589', 6 ] },

        { name: '宁夏', value: [ '106.2719421', '38.4680099', 64 ] },

        { name: '台湾', value: [ '120.9581316', '23.8516062', 49 ] },

        { name: '香港', value: [ '114.139452', '22.391577', 49 ] },

        { name: '澳门', value: [ '113.5678411', '22.167654', 36 ] },

        { name: '安徽', value: [ '117.2757034', '31.8632545', 78 ] },

        { name: '江苏', value: [ '118.7727814', '32.0476151', 98 ] }
      ]
      let list = []
      arr.forEach((item,index) => {
        const obj = {
          x:Number(item.value[0]),
          y: Number(item.value[1]),
          name: item.name,
          count: `${item.value[2]}套房`,
          price: 3.4
        }
        list.push(obj)
      })
      return list
    },
    async initMap() {
      this.myMap = new BMap.Map("allmap", {
        minZoom: 12,
        maxZoom: 20
      }); //初始化map, 绑定id=allmap
      let point = new BMap.Point(121.445, 31.213); // 初始化point, 给定一个默认x,y值
      this.myMap.centerAndZoom(point, 12); // 将point点放入map中，展示在页面中心展示，10=缩放程度
      this.myMap.enableScrollWheelZoom(true); // 开启滚动鼠标滑轮
      let scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件
      this.myMap.addControl(scaleCtrl);
      this.myMap.addControl(new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        type: BMAP_NAVIGATION_CONTROL_ZOOM
      }))
      this.setRectangleMarkerFun(this.tempCityList())
      this.myMap.addEventListener("zoomend", (e) => {
        this.curMapZoom = this.myMap.getZoom()
        if(this.curMapZoom>0&&this.curMapZoom<10) {
          this.myMap.clearOverlays()
          this.setRoundMarkerFun(this.cityList2)
        }
        if(this.curMapZoom ===6) {
          this.myMap.clearOverlays()
          const list3 = this.tempCityList()
          this.setRoundMarkerFun(list3)
        }
        if(this.curMapZoom === 14) {
        }
      });
    },
    setRoundMarkerFun(list,point,zoom) {
      if(point) {
        let point = new BMap.Point(point.lat, point.lng); // 初始化point, 给定一个默认x,y值
        this.myMap.centerAndZoom(point, zoom); // 将point点放入map中，展示在页面中心展示，10=缩放程度
      }
      if(list.length >0) {
        list.forEach((item, index) => {
          // 创建point, 将x,y值传入
          let pointNumber = new BMap.Point(item.x, item.y);
          let label = new BMap.Label();
          label.setContent(
            `<div class="my-temp">
                    <p> ${item.name}</p>
                    <p>${item.price}万</p>
                      <p>${item.count}</p>
                  </div>`
          )
          label.setStyle({
            color: "black", //字体颜色
            fontSize: "13px", //字体大小
            backgroundColor: "#369357", //文本标注背景颜色
            borderRadius: "50%",
            border: "0",
            textAlign: "center",
            fontWeight: "bold",
            width: "80px",
            height: "80px",
            display: 'flex',
            alignItems: "center",
            justifyContent: "center",
            flexDirection: 'column',
            overflow: 'hidden',
          });
          this.markerFun(pointNumber, label, item);
        });
      }

    },
    setRectangleMarkerFun(list,point,zoom) {
      if(point) {
        let point = new BMap.Point(point.lat, point.lng); // 初始化point, 给定一个默认x,y值
        this.myMap.centerAndZoom(point, zoom); // 将point点放入map中，展示在页面中心展示，10=缩放程度
      }
      if(list.length >0) {
        list.forEach((item, index) => {
          // 创建point, 将x,y值传入
          let pointNumber = new BMap.Point(item.x, item.y);
          let label = new BMap.Label();
          label.setContent(
            `<div class="my-temp">
                    <span> ${item.name}</span>
                      <span class="count">${item.count}</span>
                      <span class="price">${item.price}万</span>
                  </div>`
          )
          label.setStyle({
            color: "#fff", //字体颜色
            fontSize: "13px", //字体大小
            backgroundColor: "#369357", //文本标注背景颜色
            borderRadius: "16px",
            border: "0",
            padding: "6px 8px",
            textAlign: "center",
            fontWeight: "bold",
            height: "32px",
            display: 'flex',
            alignItems: "center",
            justifyContent: "center",
            flexDirection: 'column',
            overflow: 'hidden',
          });
          this.markerFun(pointNumber, label, item);
        });
      }
    },



    markerFun(points, label, item) {
      let myIcon = new BMap.Icon("/static/one.jpg", new BMap.Size(1, 1));
      let markers = new BMap.Marker(points, {icon: myIcon});
      this.myMap.addOverlay(markers); // 将标注添加到地图中
      markers.setLabel(label); // 将data中的name添加到地图中
      // 标注的点击事件
      label.addEventListener("click", (event) => {
        this.myMap.removeOverlay(markers);
        this.myMap.clearOverlays()
        // myMap.openInfoWindow( points);//参数：窗口、点  根据点击的点出现对应的窗口
        this.myMap.centerAndZoom(points, 16);

        // let ptdata = [
        //   {x: 121.4, y: 31.2456, name: "普陀一区<br/>102套"},
        //   {x: 121.4, y: 31.26, name: "普陀二区<br/>103套"},
        //   {x: 121.4, y: 31.2645, name: "普陀三区<br/>120套"},
        //   {x: 121.43, y: 31.18, name: "徐汇一区<br/>120套"},
        //   {x: 121.43, y: 31.19, name: "徐汇二区<br/>120套"},
        // ];
        // ptdata.forEach((e, i) => {
        //   // 创建point, 将x,y值传入
        //   let ptpointNumber = new BMap.Point(e.x, e.y);
        //
        //   // 将data中的name加入地图中
        //   let ptlabel = new BMap.Label(e.name);
        //   ptlabel.setStyle({
        //     color: "black", //字体颜色
        //     fontSize: "13px", //字体大小
        //     padding: "15px 8px",
        //     backgroundColor: "white", //文本标注背景颜色
        //     borderRadius: "50px",
        //     border: "0",
        //     textAlign: "center",
        //     fontWeight: "bold" //字体加粗
        //   });
        //   this.ptmarkerFun(ptpointNumber, ptlabel);
        // });

      });
      label.addEventListener('mouseover', (e) => {
        label.setStyle({
          color: '#fff',
          backgroundColor: "rgba(255,69,0,0.7)", //文本标注背景颜色
        });
      })
      label.addEventListener('mouseout', (e) => {
        label.setStyle({
          color: "black", //字体颜色
          backgroundColor: "#369357", //文本标注背景颜色
        });
      })
    },
    ptmarkerFun(ptpoints, ptlabel) {
      let ptmyIcon = new BMap.Icon(
        "/static/one.jpg",
        new BMap.Size(1, 1)
      );
      let ptmarkers = new BMap.Marker(ptpoints, {icon: ptmyIcon});
      // let ptmarkers = new BMap.Marker(ptpoints);
      this.myMap.addOverlay(ptmarkers); // 将标注添加到地图中
      ptmarkers.setLabel(ptlabel); // 将data中的name添加到地图中

    },
    // 获取当前地图的中心点
    getMapCenter(point) {
      if (point) {
        return point
      } else {
        let obj = this.myMap.getCenter();
        obj.lng = obj.lng.toFixed(5)
        obj.lat = obj.lat.toFixed(5)
        return obj
      }
    },
  }
}

</script>

<style lang="scss" scoped>
.page_warp {
  position: relative;
  .header_warp {
    display: flex;
    width: 100%;
    background-color: #20a0ff;
    .header_left {
      flex: 1;
    }
    .header_right {
      padding: 6px 0;
      .select_warp {
        margin-right: 20px;
      }
    }
  }
}
.page_tips_warp{
  position: absolute;
  top: 50px;
  z-index: 99999;
}
#allmap {
  height: 840px;
  overflow: hidden;
}
p{
  margin: 0;
  padding: 0;
}
.my-temp {
  z-index: 1;
  color: #ffffff;
}
.count{
  margin: 0 6px;
}
.price{
  padding: 1px 8px;
  border-radius: 16px;
  background-color: #ffffff;
  color: #369357;
}
</style>
